<template>
  <h3 style="margin-bottom: 20px">汽车</h3>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane :label="'支出(' + totalOut + ')'" name="first">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-table
              :data="props.row.detail"
              style="margin: 0 0 0 50px; width: auto"
            >
              <el-table-column>
                <template #default="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.pic"
                    :preview-src-list="[scope.row.pic]"
                    :preview-teleported="true"
                    :z-index="9999"
                    :hide-on-click-modal="true"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="money" />
              <el-table-column prop="payee" />
              <el-table-column prop="remark" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="日期" prop="date" />
        <el-table-column label="金额" prop="money" />
        <el-table-column label="收款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane :label="'收入(' + totalIn.toFixed(1) + ')'" name="second">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              :preview-teleported="true"
              :z-index="9999"
              :hide-on-click-modal="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money" />
        <el-table-column label="打款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";

const car = import.meta.glob("../assets/images/car/*", { eager: true });
const car2 = import.meta.glob("../assets/images/car2/*", { eager: true });

const activeName = ref("first");

const tableData = [
  {
    date: "2024-04-22",
    money: 50,
    payee: "蒋雪军",
    remark: "借款",
    detail: [
      {
        date: "2024-04-22",
        money: 10,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-22-1.png"] as any).default,
      },
      {
        date: "2024-04-22",
        money: 10,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-22-2.png"] as any).default,
      },
      {
        date: "2024-04-22",
        money: 10,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-22-3.png"] as any).default,
      },
      {
        date: "2024-04-22",
        money: 10,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-22-4.png"] as any).default,
      },
      {
        date: "2024-04-22",
        money: 10,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-22-5.png"] as any).default,
      },
    ],
  },
  {
    date: "2024-04-27",
    money: 25,
    payee: "郑源",
    remark: "借款",
    detail: [
      {
        date: "2024-04-27",
        money: 20,
        payee: "郑源",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-27-1.png"] as any).default,
      },
      {
        date: "2024-04-27",
        money: 5,
        payee: "郑源",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-27-2.png"] as any).default,
      },
    ],
  },
  {
    date: "2024-04-29",
    money: 60,
    payee: "郑源",
    remark: "借款",
    detail: [
      {
        date: "2024-04-29",
        money: 20,
        payee: "郑源",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-29-1.png"] as any).default,
      },
      {
        date: "2024-04-29",
        money: 20,
        payee: "郑源",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-29-2.png"] as any).default,
      },
      {
        date: "2024-04-29",
        money: 20,
        payee: "郑源",
        remark: "借款",
        pic: (car["../assets/images/car/car-4-29-3.png"] as any).default,
      },
    ],
  },
  {
    date: "2024-05-09",
    money: 15,
    payee: "蒋雪军",
    remark: "借款",
    detail: [
      {
        date: "2024-05-09",
        money: 15,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-09-1.png"] as any).default,
      },
    ],
  },
  {
    date: "2024-05-20",
    money: 100,
    payee: "蒋雪军",
    remark: "借款",
    detail: [
      {
        date: "2024-05-20",
        money: 20,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-20-1.png"] as any).default,
      },
      {
        date: "2024-05-20",
        money: 20,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-20-2.png"] as any).default,
      },
      {
        date: "2024-05-20",
        money: 20,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-20-3.png"] as any).default,
      },
      {
        date: "2024-05-20",
        money: 20,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-20-4.png"] as any).default,
      },
      {
        date: "2024-05-20",
        money: 20,
        payee: "蒋雪军",
        remark: "借款",
        pic: (car["../assets/images/car/car-5-20-5.png"] as any).default,
      },
    ],
  },
  {
    date: "2024-07-24",
    money: 30,
    payee: "蒋雪军",
    remark: "往来款,小汪",
    detail: [
      {
        date: "2024-07-24",
        money: 10,
        payee: "蒋雪军",
        remark: "往来款",
        pic: (car["../assets/images/car/car-7-24-1.png"] as any).default,
      },
      {
        date: "2024-07-24",
        money: 10,
        payee: "蒋雪军",
        remark: "往来款",
        pic: (car["../assets/images/car/car-7-24-2.png"] as any).default,
      },
      {
        date: "2024-07-24",
        money: 10,
        payee: "蒋雪军",
        remark: "往来款",
        pic: (car["../assets/images/car/car-7-24-3.png"] as any).default,
      },
    ],
  },
];

const totalOut = computed(() => {
  return tableData.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});

const tableData2: any = [
  {
    date: "2024-05-31",
    money: 3,
    payee: "杭州德轩汽车租赁",
    remark: "",
    img: (car2["../assets/images/car2/car2-5-31.jpg"] as any).default,
  },
  {
    date: "2024-06-29",
    money: 3,
    payee: "方银霞",
    remark: "",
    img: (car2["../assets/images/car2/car2-6-29.jpg"] as any).default,
  },
  {
    date: "2024-07-30",
    money: 3.2,
    payee: "杭州德轩汽车租赁",
    remark: "",
    img: (car2["../assets/images/car2/car2-7-30.jpg"] as any).default,
  },
  {
    date: "2024-08-28",
    money: 3.6,
    payee: "程庆",
    remark: "",
    img: (car2["../assets/images/car2/car2-8-28.jpg"] as any).default,
  },
  {
    date: "2024-09-30",
    money: 3.6,
    payee: "程庆",
    remark: "",
    img: (car2["../assets/images/car2/car2-9-30.jpg"] as any).default,
  },
  {
    date: "2024-10-31",
    money: 3.6,
    payee: "程庆",
    remark: "",
    img: (car2["../assets/images/car2/car2-10-31.jpg"] as any).default,
  },
  {
    date: "2024-11-30",
    money: 3.6,
    payee: "程庆",
    remark: "",
    img: (car2["../assets/images/car2/car2-11-30.jpg"] as any).default,
  },
  {
    date: "2024-12-30",
    money: 3.6,
    payee: "程庆",
    remark: "",
    img: (car2["../assets/images/car2/car2-12-30.jpg"] as any).default,
  },
];
const totalIn = computed(() => {
  return tableData2.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});
</script>

<style>
.el-table__expanded-cell {
  padding: 0 !important;
}
.el-table__expanded-cell thead {
  display: none;
}
</style>
